<template>
  <div class="container">
    <!-- <div
      id="sortPrintNote"
      :style="{
        width: print_seting.width + 'mm',
        height: print_seting.height + 'mm',
        position: 'absolute',
        overflow: 'hidden',
      }"
    >
      <span
        v-for="(item, index) in main_setting.goodslist"
        :key="index"
        style="
          position: absolute;
          overflow: hidden;
          z-index: 1;
          letter-spacing: 1px;
        "
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          fontSize: main_setting.fontset.fontSize + 'px',
          fontWeight: main_setting.fontset.bold ? 'bold' : 'none',
          textDecoration: main_setting.fontset.underline ? 'underline' : 'none',
          fontStyle: main_setting.fontset.italic ? 'italic' : 'none',
        }"
        ><template
          >{{ item.label }}:{{ order[`${item.index - 1}`] }}</template
        ></span
      >
      <div
        v-for="item in qrcode_data.qrcodelist"
        id="qrcode"
        :key="item.label"
        style="position: absolute; z-index: 10"
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
        }"
      >
        <img :src="qrcode_img" alt="" style="diplay: block; width: 100%" />
      </div>
    </div> -->
  </div>
</template>

<script>
import { getLodop } from "@/utils/LodopFuncs";
import { sort_note_print } from "@/api/order/orderList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_print_mark } from "@/api/global/globalPrint";
import QRCode from "qrcodejs2";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      print_seting: {},
      main_setting: {
        goodslist: [],
        fontset: {
          fontSize: "14",
          bold: false,
          underline: "false",
          italic: false,
          textAlign: "center",
        },
      },
      order: [],
      print_set_info: [],
      //二维码
      qrcode_data: {
        qrcodelist: [],
        selectType: [],
      },
      qrcode_img: "",
      goods_sku_code: "",
      //  辅助线
      sublineData: {
        sublinelist: [],
        selectType: [],
      },
    };
  },
  computed: {
    ...mapGetters(["avatar"]),
    print_setting() {
      return `print_setting_list_${this.avatar.company_id}`;
    },
  },
  mounted() {
    this.monitoringPrintNote(); // 注册监听事件
  },
  updated() {},
  methods: {
    monitoringPrintNote() {
      // this.$on("sortPrintNote", res => {
      //   this.get_print_info();
      //   this.getTemplateData(res);
      // });
      // 监听事件
      this.$on("sortPrintNote", async (res) => {
        await this.get_print_info();
        let id = await this.getTemplateData(res.data);
        res.cb(id);
      });
    },
    // 获取打印机配置信息
    get_print_info() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      let print_setting_list = localStorage.getItem(this.print_setting);
      if (print_setting_list) {
        try {
          this.print_set_info = JSON.parse(print_setting_list);
        } catch (error) {
          console.log(error);
        }
      }
      // get_print_mark(data).then((res) => {
      // 	if (res.errcode == 0) {
      // 		this.print_set_info = res.data.list;
      // 	}
      // });
    },
    // 加载数据
    getTemplateData(res) {
      return new Promise((resolve, reject) => {
        let id = res.id;
        let num = "";
        if (res.num) {
          num = res.num;
        }
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            ),
          },
          apiUrl().name,
          { id: id }
        );
        sort_note_print(data).then(async (res) => {
          if (res.errcode == 0) {
            let data = res.list;
            this.main_setting = JSON.parse(
              data.mubang.main_settings
            ).goodsSetData;

            this.qrcode_data = JSON.parse(data.mubang.main_settings).qrcodeData;
            this.sublineData = JSON.parse(
              data.mubang.main_settings
            ).sublineData;
            this.source = data.img;
            this.print_seting = JSON.parse(data.mubang.print_settings);
            this.order = data.order;
            if (num) {
              this.order[5] = num;
            }
            this.print_set_info.map((item) => {
              if (item.type == res.list.mubang.tem_id) {
                this.print_seting.print_mark = item.print_index;
              }
            });
            this.qrcode_img = res.list.img;
            this.goods_sku_code = res.list.goods_sku_code;
            await this.print(this.print_seting);
            resolve(id);
          } else {
            this.$message.error(res.errmsg);
            reject(id);
          }
        });
      });
    },
    // 订单打印事件
    print(params) {
      let LODOP = getLodop();
      if (!LODOP) {
        return;
      }
      if (params.print_mark != -1) {
        LODOP.SET_PRINTER_INDEX(params.print_mark);
      }
      LODOP.SET_PRINT_PAGESIZE(
        1,
        params.width + "mm",
        params.height + "mm",
        ""
      );
      // LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Auto-Width"); //设置页面缩放
      // LODOP.ADD_PRINT_HTML(
      //   params.topMargin + "px",
      //   params.leftMargin + "px",
      //   "100%",
      //   "100%",
      //   document.getElementById("sortPrintNote").innerHTML
      // );
      this.AddPrintContent();
      // LODOP.PRINT_DESIGN();
      if (params.isShow) {
        LODOP.PREVIEW();
      } else {
        LODOP.PRINT();
      }
    },

    AddPrintContent() {
      let mmTopx = "";
      if (localStorage.getItem("getOneMmsPx")) {
        mmTopx = localStorage.getItem("getOneMmsPx");
      } else {
        mmTopx = this.getOneMmsPx();
      }

      let { fontset, goodslist } = JSON.parse(
        JSON.stringify(this.main_setting)
      );
      let sublinelist = [];
      let subline_selectType = [];
      if (this.sublineData) {
        sublinelist = JSON.parse(JSON.stringify(this.sublineData)).sublinelist;
        subline_selectType = JSON.parse(
          JSON.stringify(this.sublineData)
        ).selectType;
      }

      let order = JSON.parse(JSON.stringify(this.order));
      let print_seting = JSON.parse(JSON.stringify(this.print_seting));
      let qrcode_data = JSON.parse(JSON.stringify(this.qrcode_data));
      let { bold, fontSize, italic, textAlign, underline } = fontset;
      let { qrcodelist, selectType } = qrcode_data;
      let align = {
        center: 2,
        left: 1,
        right: 3,
      };

      let lineType = {
        1: 0,
        2: 1,
        3: 2,
      };
      sublinelist.map((e) => {
        subline_selectType.map((p) => {
          if (e.index == p) {
            e.end_left = e.left;
            e.end_top = e.top;
            e.top = e.top + "px";
            e.left = e.left + "px";

            if (e.direction == 1) {
              // 横线
              LODOP.ADD_PRINT_LINE(
                e.top,
                e.left,
                e.top,
                e.end_left + e.length * mmTopx,
                lineType[e.line_type],
                e.size
              );
            } else if (e.direction == 2) {
              // 竖线
              LODOP.ADD_PRINT_LINE(
                e.top,
                e.left,
                e.end_top + e.length * mmTopx,
                e.left,
                lineType[e.line_type],
                e.size
              );
            }
          }
        });
      });

      LODOP.SET_PRINT_STYLE("FONTSIZE", fontSize);
      LODOP.SET_PRINT_STYLE("Bold", bold ? 1 : 0);
      LODOP.SET_PRINT_STYLE("Italic", italic ? 1 : 0);
      LODOP.SET_PRINT_STYLE("Underline", underline ? 1 : 0);
      // LODOP.SET_PRINT_STYLE("Alignment", align[textAlign]);

      let width = `${print_seting.width}mm`;
      let height = `${print_seting.height}mm`;
      goodslist.map((e) => {
        if(e.label && ['商品名称【规格】', '商品名称'].includes(e.label)) e.label = '商品'
        if (e.index == undefined) {
          e.text = e.showPrefix ? "" : e.label + ":" + "" ;
        } else {
          let labelText = order[e.index - 1] || ''
          e.text = e.showPrefix ? labelText : e.label + ":" + labelText;
        }
        e.left = e.left + "px";
        e.top = e.top + "px";
        LODOP.ADD_PRINT_TEXT(e.top, e.left, width, height, e.text);
        if(e.fontset) {
          LODOP.SET_PRINT_STYLEA(0, "FONTSIZE", e.fontset.fontSize);
          LODOP.SET_PRINT_STYLEA(0, "Bold", e.fontset.bold ? 1 : 0);
          LODOP.SET_PRINT_STYLEA(0, "Italic", e.fontset.italic ? 1 : 0);
          LODOP.SET_PRINT_STYLEA(0, "Underline", e.fontset.underline ? 1 : 0);
        }
      });
      qrcodelist.map((e) => {
        if (e.index == 1) {
          // 二维码
          e.left = e.left - 8 + "px";
          e.top = e.top - 8 + "px";
          e.width = 18 + "mm";
          e.height = 18 + "mm";
          LODOP.ADD_PRINT_IMAGE(
            e.top,
            e.left,
            e.width,
            e.height,
            ` <img src="${this.qrcode_img}" alt="" style="diplay: block; width: 100%" />`
          );
        }
        if (e.index == 2) {
          // 条形码;
          e.left = e.left + "px";
          e.top = e.top + "px";
          e.width = 35 + "mm";
          e.height = 10 + "mm";
          if (this.goods_sku_code) {
            LODOP.ADD_PRINT_BARCODE(
              e.top,
              e.left,
              e.width,
              e.height,
              "EAN128C",
              this.goods_sku_code
            );
            LODOP.SET_PRINT_STYLEA(0, "FontSize", 6);
            LODOP.SET_PRINT_STYLEA(0, "AlignJustify", 2);
          }
        }
      });
    },
    getOneMmsPx() {
      let div = document.createElement("div");
      div.id = "mm";
      div.style.width = "1mm";
      document.querySelector("body").appendChild(div);
      let mm1 = document.getElementById("mm").getBoundingClientRect();
      localStorage.setItem("getOneMmsPx", mm1.width);
      return mm1.width;
    },
  },
};
</script>

<style lang="scss" scoped></style>
